<template>
  <div class="yl-container">
    <div class="yl-not-found">
      <transition name="el-zoom-in-bottom">
        <img  v-show="show1" src="~@/assets/images/404.png" alt="" width="500px">
      </transition>
    </div>

    <div class="yl-not-text">
      <transition name="el-zoom-in-bottom">
        <p v-show="show" class="p-top primary">您所访问的页面不存在</p>
      </transition>

      <transition name="el-zoom-in-bottom">
        <p v-show="show1" class="p-content primary">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</p>
      </transition>

      <transition name="el-zoom-in-bottom">
        <el-button v-show="show2" type="primary" class="back-btn" @click="back">返回上一级</el-button>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      show1: false,
      show2: false
    }
  },
  created () {
    setTimeout(() => {
      this.show = true
    }, 100)
    setTimeout(() => {
      this.show1 = true
    }, 150)
    setTimeout(() => {
      this.show2 = true
    }, 200)
  },
  methods: {
    back () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .yl-container {
    position: relative;
    width: 1200px;
    margin: 0px auto 0px;
    padding: 0 100px;
    overflow: hidden;
    .yl-not-found {
      position: relative;
      float: left;
      width: 600px;
      padding: 225px 0;
      overflow: hidden;
    }
    .yl-not-text {
      position: relative;
      float: left;
      width: 400px;
      padding: 260px 0;
      overflow: hidden;
      line-height: 2.4;
    }
    .p-top {
      font-size: 2em;
      margin-bottom: 10px;
    }
    .p-content {
      line-height: 2;
      font-weight: 600;
      margin-bottom: 30px;
    }
    .back-btn {
      border-radius: 50px;
    }
  }
</style>
